// pages/search/search.js
import {search,delhistories,histories,suggestion} from '../../api/search'
Page({
  options:{
    pureDataPattern:/^_/
  },
  /**
   * 页面的初始数据
   */
  data: {
    // 删除开关
    flag:true,
    // 搜索参数
    obj:{
      page:1,
      per_page:10,
      q:null
    },
    // 渲染列表
    titleList:[],
    // 加载卡关
    loading:false,
    // 错误开关
    error:false,
    // 没有更多开关
    gengduo:false,
    // 搜索历史
    histories:[],
    // 定时器
    _time:null,
    // 自动补全
    suggestion:[]
  },
// 删除单条记录+搜索
  delicon(e){
    const index = e.currentTarget.dataset.id -0
    if(this.data.flag) {
      this.setData({
        "obj.q":this.data.histories[index]
      })
      this.getSearchData()
    }else{
    this.data.histories.splice(index,1)
    this.setData({
      histories:this.data.histories
    })}
  },

  // 输入框双向绑定
   onChange(e){
this.setData({
  'obj.q':e.detail.trim(),
  suggestion:[]
})
// 输入获取自动补全
// 节流
if (this.data._time) return
// 定时器
 let time = setTimeout(async ()=>{
  // 防止发请求参数为空
  if(!this.data.obj.q){
    // 清除定时器
    this.setData({
      _time:null
     })
    //  防止报错
     return
  }
  const res = await suggestion({q:this.data.obj.q})
  const regexp = new RegExp(this.data.obj.q,"g")
  // console.log(regexp);
  // console.log(res.data.options);
  const arr = res.data.options.map(item=>{
    if (!item) return
   return item.replace(regexp,`<span style="color: red;">${this.data.obj.q}</span>`)
  })
  // console.log(arr);
 this.setData({
  suggestion:arr,
  // 清除定时器
  _time:null
 })
 },1000)
//  有定时器id赋值
 this.setData({
  _time:time
 })
  },
  
  // 搜索
onSearch(){
  this.data.histories.push(this.data.obj.q)
  const arrset =new Set(this.data.histories)
  this.setData({
    histories:[...arrset]
  })
  this.getSearchData()
},
// 取消
onCancel(){
  // console.log(2);
  wx.navigateBack({
    delta: 1
  });
},
// 点击删除图标
onDelIcon(){
this.setData({
  flag:!this.data.flag
})
},
// 全部删除
onDel(){
  this.setData({
    arr:[],
    histories:[]
  })
},
// 点击完成按钮
onOk(){
  this.setData({
    flag:!this.data.flag
  })
},
// 搜索函数获取数据
async getSearchData(){
  this.setData({
    loading:true,
    error:false
  })
try {
  const res = await search(this.data.obj)
res.data.results
this.setData({
  titleList:[...this.data.titleList,...res.data.results],
  loading:false,
  gengduo:true, 
})
} catch (error) {
  this.setData({
    error:true,
    loading:false,
  })
}
},
// 获取输入框焦点
 onFocus(){
  this.setData({
    titleList:[],
    'obj.page':1,
    loading:false,
    error:false,
    gengduo:false, 
  })
  
},
onclick(){
  // 打开开关
 if(!this.data.error) return
  this.setData({
    loading:true
  })
  this.getSearchData()
},



  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {
    if(this.data.titleList.length===0 || this.data.error) return
    this.setData({
      'obj.page':this.data.obj.page + 1
    })
    this.getSearchData()
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
})